import { nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
import type { Ref } from 'vue'

export function useCalcTableHeight() {
  const tableHeight = ref<string>('0px')

  const calcTableHeight = async () => {
    const el: HTMLAnchorElement | any = document.querySelector('#table_contain')
    console.log(2333)
    await nextTick(() => {
      const height = el?.clientHeight || 0
      tableHeight.value = `${height}px`
    })
  }

  onMounted(async () => {
    await calcTableHeight()
    window.addEventListener('resize', calcTableHeight)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', calcTableHeight)
  })

  return {
    tableHeight
  }
}
